

<template>
    <div class="middle">
        <div class="tableone_title">设备一览表</div>
        <!--设备展示表-->
        <div class="table_show">
            <el-table :data="showTableData"
                style="width:100%"
                height="300"
                max-height="300"
                highlight-current-row
                header-row-class-name="headerName"
                @row-click="onClickShowTableRow"
                border>
                <el-table-column label="序号"
                    type="index"
                    align="center"
                    width="70">
                </el-table-column>
                <el-table-column v-for="item in showTableCol"
                    :key="item.prop"
                    :prop="item.prop"
                    :label="item.label"
                    :width="item.width"></el-table-column>
                <el-table-column prop="operate"
                    label="操作"
                    width="70">
                    <template #default="scope">
                        <el-button type="primary"
                            size="small"
                            :icon="Delete"
                            @click.enter.prevent="deleteRow(scope.$index)" />
                    </template>
                </el-table-column>
            </el-table>
            <el-button class="mt-4"
                style="width: 100%"
                @click="addRowItem">添加</el-button>
        </div>
        <div class="tabletwo_title">设备选型</div>
        <!--设备筛选-->
        <div class="export">
            <div class="condition">

                <el-row v-if="inputSpecial"
                    :gutter="24">
                    <el-col :span="12"
                        style="padding-top: 5px; padding-right:0px;padding-left:15px; max-width: 24.5%;">{{inputOneTitle}}</el-col>
                    <el-col :span="12">
                        <el-select v-model="optionOneValue"
                            style="padding-right:0px;padding-left:0px">
                            <el-option v-for="(item,i) in props.optionsOne"
                                :key="i"
                                :label="item"
                                :value="item"></el-option>
                        </el-select>
                    </el-col>
                </el-row>

                <el-row v-if="!inputSpecial"
                    :gutter="24">
                    <el-col v-if="inputOneShow"
                        :span="3"
                        style="padding-top: 5px; padding-right:0px;padding-left:15px; max-width: 9.5%;">{{inputOneTitle}}</el-col>
                    <el-col v-if="!inputOneShow"
                        :span="3"
                        style="padding-top: 5px; padding-right:0px;padding-left:15px; max-width: 7.5%;">{{inputOneTitle}}</el-col>
                    <el-col :span="3">
                        <el-select v-model="optionOneValue"
                            style="padding-right:0px;padding-left:0px">
                            <el-option v-for="(item,i) in props.optionsOne"
                                :key="i"
                                :label="item"
                                :value="item"></el-option>
                        </el-select>
                    </el-col>
                    <el-col v-if="inputTwoShow"
                        :span="3"
                        style="padding-top: 5px; padding-right:0px;padding-left:15px; max-width: 5.5%;">{{inputTwoTitle}}</el-col>
                    <el-col v-if="inputTwoShow"
                        :span="3">
                        <el-select v-model="optionTwoValue"
                            style="padding-right:0px;padding-left:0px">
                            <el-option v-for="(item,i) in props.optionsTwo"
                                :key="i"
                                :label="item"
                                :value="item"></el-option>
                        </el-select>
                    </el-col>
                    <el-col v-if="inputThreeShow"
                        :span="3"
                        style="padding-top: 5px; padding-right:0px;padding-left:15px; max-width: 5.5%;">{{ inputThreeTitle }}</el-col>
                    <el-col v-if="inputThreeShow"
                        :span="3"
                        style="padding-left:5px">
                        <el-select v-model="optionThreeValue">
                            <el-option v-for="(item,i) in props.optionsThree"
                                :key="i"
                                :label="item"
                                :value="item"></el-option>
                        </el-select>
                    </el-col>
                    <el-col v-if="inputFourShow"
                        :span="3"
                        style="padding-top: 5px; padding-right:0px;padding-left:15px; max-width: 7.5%;">{{ inputFourTitle }}</el-col>
                    <el-col v-if="inputFourShow"
                        :span="3"
                        style="padding-left:5px">
                        <el-select v-model="optionFourValue">
                            <el-option v-for="(item,i) in props.optionsFour"
                                :key="i"
                                :label="item"
                                :value="item"></el-option>
                        </el-select>
                    </el-col>
                </el-row>
            </div>

            <div class="search">
                <el-row :gutter="24">
                    <el-col :span="9"
                        style="padding-top: 10px; padding-right:0px;padding-left:15px; max-width: 35%;">快速搜索：</el-col>
                    <el-col :span="15"
                        style="padding-left=5px">

                        <el-input v-model="input2"
                            class="w-50 m-2"
                            placeholder="快速搜索"
                            style="padding-top: 5px; padding-right:0px;padding-left:0px"
                            :prefix-icon="Search" />
                    </el-col>

                </el-row>
            </div>
        </div>
        <!--设备选型表-->
        <div class="table_select">
            <el-table :data="selectTableData"
                style="width:100%"
                max-heght="250"
                height="250"
                header-row-class-name="headerNametwo"
                border>
                <el-table-column v-for="(items,i) in selectTableCol"
                    fixed
                    :key="i"
                    :prop="items.prop"
                    :label="items.label"
                    :width="items.width"></el-table-column>
                <el-table-column type="selection"
                    width="55"></el-table-column>
                <el-table-column fixed
                    label="设备详情"
                    width="100">
                    <template #default="scope">
                        <el-button type="primary"
                            size="small"
                            @click.enter.prevent="handleCheckLookDetial(scope.$index)">查看详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>

    <!--设备详情-->
    <div class="dlg"
        ref="childdlg">
        <el-dialog v-model="DialogShow"
            title="设备详情"
            width="40%"
            destroy-on-close
            align-center>
            <Detial :equipmentName="curDetialEquipmentModel"
                :equipmentType="curTreeNodeValue"></Detial>
        </el-dialog>
    </div>
</template>

<script setup>
import LibraryDataJson from '@/datas/EquipmentLibraryData.json'
import LibraryParameterJson from '@/datas/EquipmentLibraryParameters.json'
import DataJson from '@/datas/PrimarySubstationData.json'
import ParameteJson from '@/datas/PrimarySubstationParameters.json'
import { sendMsgToGetEquipmentLibrary } from '@/utils/Interaction'
import { Delete, Search } from '@element-plus/icons-vue'
import { defineEmits, defineProps, getCurrentInstance, onMounted, ref, watch } from 'vue'
import bus from '../../utils/EventBus'
import Detial from './EquipmentDetial.vue'

//----------------------------------------------------数据定义

// 当前树节点的值
const curTreeNodeValue = ref('变压器')
// 当前查看详情的设备型号
const curDetialEquipmentModel = ref('')
//当前组件的ref
const currefs = getCurrentInstance()
// 筛选条件数据
const inputOneTitle = ref('电压等级:')
const inputTwoTitle = ref('绕组:')
const inputThreeTitle = ref('相数:')
const inputFourTitle = ref('')
const inputOneShow = ref(true)
const inputTwoShow = ref(true)
const inputThreeShow = ref(true)
const inputFourShow = ref(false)
const inputSpecial = ref(false)

const optionOneValue = ref('') //当前第一个条件选择器的值
const optionTwoValue = ref('') //当前第二个条件选择器的值
const optionThreeValue = ref('') //当前第三个条件选择器的值
const optionFourValue = ref('') //当前第四个条件选择器的值

// 设备详情对话框展示的标识
const DialogShow = ref(false)
// 新增数据
const now = new Date()
// 碳因子标识
const factorMark = ref(1)
// props 对象
const props = defineProps({
  showTableCol: { type: Array, default: [], require: 1 },
  selectTableCol: { type: Array, default: [], require: 1 },
  showTableData: { type: Array, default: [] },
  selectTableData: { type: Array, default: [] },

  optionsOne: { type: Array, default: [] },
  optionsTwo: { type: Array, default: [] },
  optionsThree: { type: Array, default: [] },
  optionsFour: { type: Array, default: [] }
})
// emit对象
const emit = defineEmits([
  'ChangeShowTableHeader',
  'ChangeShowTableData',
  'ChangeSelectTableHeader',
  'ChangeSelectTableData'
])

//----------------------------------------------------响应

onMounted(() => {
  console.log('props', props)

  //接受
  bus.on('treeNodeClick', (e) => {
    //当前树节点值
    console.log('接收到的树节点L:', e)
    curTreeNodeValue.value = e
    //
    ChangeSelectMark(e)
    //所获取的表头数据
    const i = ref(0)
    for (i.value = 0; i.value < ParameteJson.length; i.value++) {
      if (ParameteJson[i.value].name == e) {
        const dataHeader = ParameteJson[i.value].header
        console.log('获取到的节点数据表格表头：', dataHeader)
        if (dataHeader) ChangeShowTableHeader(dataHeader)
      }
    }

    //所获取的表格数据
    for (i.value = 0; i.value < DataJson.length; i.value++) {
      if (DataJson[i.value].name == e) {
        const dataTable = DataJson[i.value].data
        console.log('获取到的树节点表格数据：', dataTable)
        if (dataTable) ChangeShowTableData(dataTable)
      }
    }

    //所获取的表头数据
    for (i.value = 0; i.value < LibraryParameterJson.length; i.value++) {
      if (LibraryParameterJson[i.value].name == e) {
        const dataHeader = LibraryParameterJson[i.value].header
        console.log('获取到的节点数据表格表头：', dataHeader)
        if (dataHeader) ChangeSelectTableHeader(dataHeader)
      }
    }

    //所获取的表格数据
    for (i.value = 0; i.value < LibraryDataJson.length; i.value++) {
      if (LibraryDataJson[i.value].name == e) {
        const dataTable = LibraryDataJson[i.value].data
        console.log('获取到的树节点表格数据：', dataTable)
        if (dataTable) ChangeSelectTableData(dataTable)
      }
    }
  })
})

//监测第一个选择框的变化
watch(optionOneValue, (newValue, oldValue) => {
  console.log('new cool', newValue)
})
//检测第二个选择框的变化
watch(optionTwoValue, (newValue, oldValue) => {
  console.log('new voltage', newValue)
})
//检测第三个选择框的变化
watch(optionThreeValue, (newValue, oldValue) => {
  console.log('new winding', newValue)
})
//检测第四个选择框的变化
watch(optionFourValue, (newValue, oldValue) => {
  console.log('new phase', newValue)
})

//改变子对话框中parametercard的显示
watch(curTreeNodeValue, (newValue, oldValue) => {})

// 设备展示表格-删除行方法
const deleteRow = (index) => {
  props.showTableData.splice(index, 1)
}

// 设备展示表格-添加行方法
const addRowItem = () => {
  console.log('click新增')
  now.setDate(now.getDate() + 1)

  //所获取的表格数据
  const i = ref(0)
  for (i.value = 0; i.value < DataJson.length; i.value++) {
    if (DataJson[i.value].name == curTreeNodeValue.value) {
      const dataTable = DataJson[i.value].data
      const one = dataTable[0]
      console.log('新增数据：', one)
      props.showTableData.push(one)
    }
  }
}

// 设备展示表格 - 行点击事件
const onClickShowTableRow = (index) => {
  console.log('设备行被点击:', row)
  console.log('设备行被点击:', row.model)

  const dataData = ref([])
  sendMsgToGetEquipmentLibrary(curTreeNodeValue, dataData)
  console.log('获取的当前设备型号的详细信息：', dataData)

  ChangeSelectTableData(dataData)
}

// 设备展示表格-添加行数据
const addRow = (param) => {}

//设备选择表格-查看详情的点击事件
const handleCheckLookDetial = (index) => {
  console.log('查看详情的点击事件:model', props.selectTableData[index].model)

  curDetialEquipmentModel.value = props.selectTableData[index].model
  DialogShow.value = true
}

//----------------------------------------------------方法实现

// 改变设备详情展示信息的显示
const ChangeSelectMark = (val) => {
  if (val == '变压器') {
    inputOneTitle.value = '电压等级:'
    inputTwoTitle.value = '绕组:'
    inputThreeTitle.value = '相数:'
    inputFourTitle.value = ''
    inputOneShow.value = true
    inputTwoShow.value = true
    inputThreeShow.value = true
    inputFourShow.value = false

    inputSpecial.value = false
  }
  if (val == '电容器' || val == '电抗器' || val == 'GIS') {
    inputOneTitle.value = '电压等级:'
    inputTwoTitle.value = ''
    inputThreeTitle.value = ''
    inputFourTitle.value = ''
    inputOneShow.value = true
    inputTwoShow.value = false
    inputThreeShow.value = false
    inputFourShow.value = false

    inputSpecial.value = true
  }
  if (val == '硬导体' || val == '软导体') {
    inputOneTitle.value = '导体类型:'
    inputTwoTitle.value = '材质:'
    inputThreeTitle.value = '规格:'
    inputFourTitle.value = '额定电流:'
    inputOneShow.value = false
    inputTwoShow.value = true
    inputThreeShow.value = true
    inputFourShow.value = true

    inputSpecial.value = false
  }
}

// 改变showTable表头的方法
const ChangeShowTableHeader = (val) => {
  emit('ChangeShowTableHeader', val)
}

// 改变showTable数据的方法
const ChangeShowTableData = (val) => {
  emit('ChangeShowTableData', val)
}

// 改变selectTable表头的方法
const ChangeSelectTableHeader = (val) => {
  emit('ChangeSelectTableHeader', val)
}

// 改变selectTable数据的方法
const ChangeSelectTableData = (val) => {
  emit('ChangeSelectTableData', val)
}
</script>

<style lang="scss">
.middle {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: flex-start;
  .tableone_title {
    width: 200px;
    padding: 5px 0;
  }
  .table_show {
    ::v-deep(.el-table__body-wrapper) {
      background-color: #666262;
    }
    .headerName {
      color: rgba(82, 80, 80, 0.986);
    }
  }
  .tabletwo_title {
    width: 200px;
    padding: 5px 0;
  }
  .table_select {
    display: flex;
    .headerNametwo {
      color: rgba(82, 80, 80, 0.986);
    }
  }
  .export {
    display: flex;
    flex-direction: column;
    .condition {
      display: flex;
    }
    .search {
      width: 20%;
      height: 50px;
    }
  }
}

.dlg {
  .el-dialog__header {
    padding: var(--el-dialog-padding-primary);
    padding-bottom: 1px;
    margin-right: 16px;
    word-break: break-all;
  }
  .el-dialog__body {
    padding: calc(var(--el-dialog-padding-primary) + 10px) var(--el-dialog-padding-primary);
    padding-top: 10px;
    padding-bottom: 10px;
    color: var(--el-text-color-regular);
    font-size: var(--el-dialog-content-font-size);
    word-break: break-all;
  }
}
</style>